// 星形评价
export const starRate = (editor) => {
  const {
    Components
  } = editor;
  Components.addType('starRate', {
    model: {
      defaults: {
        name: 'starRate',
        droppable: true,
        attributes: {
          class: 'allDiv'
        },
        components: [{
          type: 'div',
          attributes: {
            class: 'rateDiv'
          },
          components: [
            // 添加五个 SVG 星星  
            {
              type: 'svg',
              content: '<svg t="1723109658587" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4461" width="16" height="16"><path d="M784.16441 645.6c-3.8 3.7-5.5 9-4.6 14.2L835.36441 985c1.8 10.3-6.4 18.7-15.8 18.7-2.5 0-5-0.6-7.5-1.9L520.16441 848.3c-2.3-1.2-4.9-1.8-7.5-1.8s-5.1 0.6-7.5 1.8l-292.1 153.5c-2.5 1.3-5 1.9-7.5 1.9-9.3 0-17.5-8.4-15.8-18.7L245.66441 659.8c0.9-5.2-0.8-10.5-4.6-14.2L4.86441 415.3C-4.63559 406 0.56441 389.9 13.66441 388l326.5-47.5c5.2-0.8 9.7-4 12-8.8l146-295.9c2.9-5.9 8.6-8.9 14.3-8.9s11.4 3 14.3 8.9l146 295.9c2.3 4.7 6.8 8 12 8.8L1011.66441 388c13.1 1.9 18.4 18 8.9 27.3L784.16441 645.6z" p-id="4462"></path></svg>', // 假设的 SVG 内容，需要替换为实际的星星 SVG  
              classes: ['star-item'],
              traits: []
            },
            {
              type: 'svg',
              content: '<svg t="1723109658587" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4461" width="16" height="16"><path d="M784.16441 645.6c-3.8 3.7-5.5 9-4.6 14.2L835.36441 985c1.8 10.3-6.4 18.7-15.8 18.7-2.5 0-5-0.6-7.5-1.9L520.16441 848.3c-2.3-1.2-4.9-1.8-7.5-1.8s-5.1 0.6-7.5 1.8l-292.1 153.5c-2.5 1.3-5 1.9-7.5 1.9-9.3 0-17.5-8.4-15.8-18.7L245.66441 659.8c0.9-5.2-0.8-10.5-4.6-14.2L4.86441 415.3C-4.63559 406 0.56441 389.9 13.66441 388l326.5-47.5c5.2-0.8 9.7-4 12-8.8l146-295.9c2.9-5.9 8.6-8.9 14.3-8.9s11.4 3 14.3 8.9l146 295.9c2.3 4.7 6.8 8 12 8.8L1011.66441 388c13.1 1.9 18.4 18 8.9 27.3L784.16441 645.6z" p-id="4462"></path></svg>', // 假设的 SVG 内容，需要替换为实际的星星 SVG  
              classes: ['star-item'],
              traits: []
            },
            {
              type: 'svg',
              content: '<svg t="1723109658587" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4461" width="16" height="16"><path d="M784.16441 645.6c-3.8 3.7-5.5 9-4.6 14.2L835.36441 985c1.8 10.3-6.4 18.7-15.8 18.7-2.5 0-5-0.6-7.5-1.9L520.16441 848.3c-2.3-1.2-4.9-1.8-7.5-1.8s-5.1 0.6-7.5 1.8l-292.1 153.5c-2.5 1.3-5 1.9-7.5 1.9-9.3 0-17.5-8.4-15.8-18.7L245.66441 659.8c0.9-5.2-0.8-10.5-4.6-14.2L4.86441 415.3C-4.63559 406 0.56441 389.9 13.66441 388l326.5-47.5c5.2-0.8 9.7-4 12-8.8l146-295.9c2.9-5.9 8.6-8.9 14.3-8.9s11.4 3 14.3 8.9l146 295.9c2.3 4.7 6.8 8 12 8.8L1011.66441 388c13.1 1.9 18.4 18 8.9 27.3L784.16441 645.6z" p-id="4462"></path></svg>', // 假设的 SVG 内容，需要替换为实际的星星 SVG  
              classes: ['star-item'],
              traits: []
            },
            {
              type: 'svg',
              content: '<svg t="1723109658587" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4461" width="16" height="16"><path d="M784.16441 645.6c-3.8 3.7-5.5 9-4.6 14.2L835.36441 985c1.8 10.3-6.4 18.7-15.8 18.7-2.5 0-5-0.6-7.5-1.9L520.16441 848.3c-2.3-1.2-4.9-1.8-7.5-1.8s-5.1 0.6-7.5 1.8l-292.1 153.5c-2.5 1.3-5 1.9-7.5 1.9-9.3 0-17.5-8.4-15.8-18.7L245.66441 659.8c0.9-5.2-0.8-10.5-4.6-14.2L4.86441 415.3C-4.63559 406 0.56441 389.9 13.66441 388l326.5-47.5c5.2-0.8 9.7-4 12-8.8l146-295.9c2.9-5.9 8.6-8.9 14.3-8.9s11.4 3 14.3 8.9l146 295.9c2.3 4.7 6.8 8 12 8.8L1011.66441 388c13.1 1.9 18.4 18 8.9 27.3L784.16441 645.6z" p-id="4462"></path></svg>', // 假设的 SVG 内容，需要替换为实际的星星 SVG  
              classes: ['star-item'],
              traits: []
            },
            {
              type: 'svg',
              content: '<svg t="1723109658587" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4461" width="16" height="16"><path d="M784.16441 645.6c-3.8 3.7-5.5 9-4.6 14.2L835.36441 985c1.8 10.3-6.4 18.7-15.8 18.7-2.5 0-5-0.6-7.5-1.9L520.16441 848.3c-2.3-1.2-4.9-1.8-7.5-1.8s-5.1 0.6-7.5 1.8l-292.1 153.5c-2.5 1.3-5 1.9-7.5 1.9-9.3 0-17.5-8.4-15.8-18.7L245.66441 659.8c0.9-5.2-0.8-10.5-4.6-14.2L4.86441 415.3C-4.63559 406 0.56441 389.9 13.66441 388l326.5-47.5c5.2-0.8 9.7-4 12-8.8l146-295.9c2.9-5.9 8.6-8.9 14.3-8.9s11.4 3 14.3 8.9l146 295.9c2.3 4.7 6.8 8 12 8.8L1011.66441 388c13.1 1.9 18.4 18 8.9 27.3L784.16441 645.6z" p-id="4462"></path></svg>', // 假设的 SVG 内容，需要替换为实际的星星 SVG  
              classes: ['star-item'],
              traits: []
            },

          ]

        },
        {
          type: 'text',
          content: '0',
          attributes: {
            class: 'textDiv'
          },
          traits: [
            {
              type: 'number',
              label: '评分',
              name: 'rate',
              // 可选：设置最小值  
              min: 0,
              // 可选：设置最大值  
              max: 100,
              // 可选：设置默认值  
              default: 90
            },
          ]
        }
        ],
        script() {
          // 假设这个函数是在某个元素（如th）的某个事件处理器中被调用的  
          // 这里直接使用 this.id 获取元素的 ID  
          var th = document.getElementById(this.id);
          console.log(th);

          // 假设 rateDiv 是 th 的子元素  
          var rateDiv = th.getElementsByClassName('rateDiv')[0];
          console.log(rateDiv);

          // 假设 textDiv 是 rateDiv 的兄弟元素或内部元素，这里需要根据你的 DOM 结构来调整选择器  
          var textDiv = th.querySelector('.textDiv'); // 使用 querySelector 查找更灵活的元素  
          console.log(textDiv);

          textDiv.addEventListener('click', handleBlur);

          function handleBlur(params) {
            let userInput = prompt("请输入数字（1-5）:")
            if (userInput !== null && !isNaN(userInput) && userInput >= 0 && userInput <= 5) {
              this.textContent = userInput;
              var childs = Array.from(rateDiv.children);
              for (var i = 0; i < userInput; i++) {
                var svg = childs[i].querySelector('svg');
                svg.style.fill = 'yellow';
              }
              for (var i = userInput; i < childs.length; i++) {
                var svg = childs[i].querySelector('svg');
                svg.style.fill = 'gray';
              }

            }


          }




          //   var observer = new MutationObserver(function(mutationsList, observer) {  
          //     for (var mutation of mutationsList) {  
          //         if (mutation.type === 'childList') {  
          //             console.log('textDiv 的子节点列表变化了: ', textDiv.textContent);  
          //         } else if (mutation.type === 'characterData') {  
          //             // 这对于直接修改 Text 节点的内容是有效的  
          //             console.log('textDiv 内的某个 Text 节点的内容变化了: ', textDiv.textContent);  
          //         }  
          //     }  
          // });  

          // 配置观察选项:  
          // var config = { childList: true, subtree: true, characterData: true };  

          // 注意：subtree: true 意味着观察器也将观察目标节点的所有后代节点  
          // 这对于捕获嵌套在 textDiv 中的元素变化非常有用  

          // 传递要观察的节点和观察选项给观察器实例  
          // observer.observe(textDiv, config);  

          // 你可以在这里给 rateDiv 添加点击事件监听器  
          // rateDiv.onclick = function() {  
          //     // 你的点击事件处理逻辑  
          // };  
        },

        // 假设你有一个具有特定 ID 的元素，并且你想在某种事件触发时（如页面加载完成）调用这个 script 函数  
        // 你可以这样做（这里只是示例，实际调用时机和方式可能不同）：  
        // document.getElementById('yourElementId').addEventListener('someEvent', script);
        // listeners:[
        //   {
        //     event: 'click',
        //     action: function(component){
        //       const inputValue = prompt('请输入评分（0-100）','')
        //       if(inputValue && !isNaN(inputValue) && inputValue >= 0 && inputValue <= 100){
        //         const textContent = component.closest({type: 'div'}).findComponent({type:'text'});
        //         textContent.set('content',inputValue);
        //       }
        //     }
        //   }
        // ],
        traits: [
          {
            type: 'number',
            label: '评分',
            name: 'rate',
            // 可选：设置最小值  
            min: 0,
            // 可选：设置最大值  
            max: 5,
            // 可选：设置默认值  
            default: 4
          },
          {
            type: 'color',
            label: '背景色',
            name: 'backgroundColor',
            // 可选：设置颜色的默认值  
            default: '#ffffff'
          }
        ],
        styles: `
        .allDiv{
          width: 180px;
          display: flex;
          text-align: left;
          align-items: center;
        }
        .star-item{
          width: 17%;
          height: 20px;
          fill: gray;
        }
        .textDiv{
          width: 20%;
        }
        .rateDiv{
          width: 80%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
        }`
      }
    },
  });
  // 注册组件
  editor.BlockManager.add('starRate', {
    label: '星级评价',
    category: '其他类',
    media: `<svg t="1723608278277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5243" width="30" height="30"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z" p-id="5244"></path></svg>`,
    content: {
      type: 'starRate'
    },

  });

}